如果你還以為「登入系統 = Email + 密碼 + 一顆登入按鈕」，那這篇可能會刷新你的三觀。
在這整個系列裡，我從「最基本的 Firebase Login」一路補血到「MFA / Token Rotation / 權限控管」，最後乾脆整理成這份——前端工程師專用《認證防護 Checklist》🛡️
如果你未來也要做登入 / 註冊系統，就直接照這份表一條一條打勾。只要有 80% 條件達成，你就已經超越一堆商用系統。
| 安全機制類型 | 功能項目 | 本系列是否實作 | 備註 / 延伸 |
|---|---|---|---|
| ✅ 密碼輸入防呆 | 密碼強度檢測（zxcvbn） | ✔️ | 根據 score 顯示顏色 / 建議 |
| ✅ 表單驗證 | React Hook Form + Yup | ✔️ | 針對 Email、密碼格式、必填欄位 |
| ✅ 第三方登入 | Firebase Google / Github OAuth | ✔️ | 可延伸 Apple / LINE Login |
| ✅ Email 驗證 | 註冊後寄驗證信 | ✔️ | 未驗證不得完全登入 |
| ✅ Token 管理 | JWT + Refresh Token | ✔️ | 可進一步加上 Token Rotation |
| ✅ 權限控管 | Protected Route + Role-Based UI | ✔️ | Redux / Context 都可延伸 |
| ✅ MFA 雙重驗證 | Email / OTP / SMS | ✔️ | 本系列做了基本 & 進階版 |
| 🔒 裝置綁定 | Device Fingerprint | ➕ 可再強化 | 防止陌生裝置登入 |
| 🔒 登入異常偵測 | 多次失敗鎖定機制 | ➕ 可再強化 | 可透過 Firestore 實作 |
| 🔒 審計 / 紀錄 | 登入 / MFA 活動記錄 | ➕ 可再強化 | 之後可加管理後台 |
iThome鐵人賽
看影片追技術
看更多
